<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>

        <q-toolbar-title>
          BanG Player
        </q-toolbar-title>

        <div>
          <q-btn flat round icon="comment" @click="isNotificationDialogDisplay = true"/>
          <q-btn flat round icon="settings" @click="isOptionDialogDisplay = true" :disable="loading"/>
          <q-btn flat round icon="favorite" @click="isFavoriteDialogDisplay = true" :disable="loading"/>
          <q-btn flat round :icon="fullScreenBtnIcon"
                 @click="toggle" ref="fullScreenBtn"/>
          <q-btn flat round icon="info" @click="isAboutDialogDisplay = true"/>
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view/>
      <notification v-model="isNotificationDialogDisplay"/>
      <options v-model="isOptionDialogDisplay"/>
      <favorite v-model="isFavoriteDialogDisplay"/>
      <about v-model="isAboutDialogDisplay"/>
    </q-page-container>
  </q-layout>
</template>

<script>
  import Options from "src/pages/player/Options";
  import Favorite from "src/pages/player/Favorite";
  import Notification from "src/components/public/notification";
  import About from "src/pages/player/about";
  import screenfull from 'screenfull';

  export default {
    name: 'MainLayout',
    components: {Notification, Favorite, Options, About},
    data() {
      return {
        isOptionDialogDisplay: false,
        isFavoriteDialogDisplay: false,
        isNotificationDialogDisplay: false,
        isAboutDialogDisplay: false,
      }
    },
    computed: {
      fullScreenBtnIcon() {
        return !this.isFS ? 'fullscreen_exit' : 'fullscreen';
      },
      isFS() {
        return !this.$q.fullscreen.isActive;
      },
      loading: {
        get() {
          return this.$store.state.loading;
        },
        set(v) {
          this.$store.commit('setLoading', v)
        }
      }
    },
    methods: {
      toggle() {
        screenfull.toggle();
      }
    }
  }
</script>
